Structural Directives in Angular

Structural Directives are responsible for shaping the DOM elements by adding or removing or manipulating the elements. It defines the structure of the DOM to be rendered.

Some of the in-built structural directives are

• NgIf
• NgFor
• NgSwitch

NgIf Directive:

The NgIf directive is responsible for deciding whether to add or remove the entire chunk of DOM based on the boolean value. If it is true then it will show it in the DOM/template, else it will remove it from the DOM.

NgFor Directive

The NgFor directive is used to loop through any given list and add any template to the DOM.

NgSwitch Directive

It is similar to switch case which we use in many programming language. The NgSwitch get a value and matches with any of the switch cases.

NgSwitch is an attribute directive which controls the behavior of the NgSwitchCase and NgSwitchDefault structural directives. Thats why we specify NgSwitch as [ngSwitch] instead of *ngSwitch.

Let's create an angular application using angular cli command.

ng new angular-tutorial

This will create a new angular application. Now open the app.component.ts file and modify the code as below.

import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      age = 30;
      get isAdult() {
        return this.age >= 18 ? true : false;
      }
    
      employees = [
        'John', 'Peter', 'Luke', 'Mark'
      ];
      
      selectedEmployee: string;
    
    } 

In the above code, we have a variable named age with default value of 30.

The isAdult() getter property which returns true if the age is greater than 18, else it will return false.

The employees variable is an array that holding the list of employee name. The selectedEmployee variable will hold the selected employee name in the html template.

Now, open the app.component.html file and modify the code as below.

<ng-container *ngIf='isAdult'>
  <p>Welcome! You can vote now.</p>
</ng-container>

<ng-container *ngIf='employees.length>0'>
  <select [(ngModel)]='selectedEmployee'>
    <option>--select--</option>
    <ng-container *ngFor='let employee of employees;'>
      <option [value]='employee'>{{employee}}</option>
    </ng-container>
  </select>
</ng-container>

<ng-container *ngIf='selectedEmployee'>
  <ng-container [ngSwitch]='selectedEmployee'>
    <p *ngSwitchCase="'John'">Welome {{selectedEmployee}}! You act as CEO.</p>
    <p *ngSwitchCase="'Peter'">Welome {{selectedEmployee}}! You act as Manager.</p>
    <p *ngSwitchCase="'Luke'">Welome {{selectedEmployee}}! You act as Project Lead.</p>
    <p *ngSwitchCase="'Mark'">Welome {{selectedEmployee}}! You act as Senior Engineer.</p>
  </ng-container>
</ng-container>

Before explaining the in-built structural directives, lets understand the purpose of ng-container. The ng-container can be used along with any one of the structural directives.

The ng-container will not be added to the DOM. If we use div instead of ng-container the div will be added to the DOM if it satisfies the condition.

In the above code, let's explain it one by one.

<ng-container *ngIf='isAdult'>
   <p>Welcome! You can vote now.</p>
</ng-container>

Here we are using NgIf structural directive to check whether isAdult is true or false. If it is true, then the para element will be added to the DOM. If isAdult is false then para will not be added to the DOM.

Next we shall look into NgFor structural directive.

<ng-container *ngIf='employees.length>0'>
  <select [(ngModel)]='selectedEmployee'>
    <option>--select--</option>
    <ng-container *ngFor='let employee of employees;'>
      <option [value]='employee'>{{employee}}</option>
    </ng-container>
  </select>
</ng-container>

In the above code, we are checking whether the employees array's length is greater than 0 using NgIf directive. Here, it satisfies the condition, so we use select input binding to selectedEmployee model.

To use ngModel we need to import the FormsModule in app.module.ts file and add it to the imports array. Now we add a --select-- option by default and then we loop through the employees array and add it as option label and value using NgFor directive.

let employee of employees

The code above denotes, assigning each employee in the employees array to local variable employee.

Now lets look into the NgSwitch part in the code.

<ng-container *ngIf='selectedEmployee'>
  <ng-container [ngSwitch]='selectedEmployee'>
    <p *ngSwitchCase="'John'">Welome {{selectedEmployee}}! You act as CEO.</p>
    <p *ngSwitchCase="'Peter'">Welome {{selectedEmployee}}! You act as Manager.</p>
    <p *ngSwitchCase="'Luke'">Welome {{selectedEmployee}}! You act as Project Lead.</p>
    <p *ngSwitchCase="'Mark'">Welome {{selectedEmployee}}! You act as Senior Engineer.</p>
    <p *ngSwithDefault>No Employee Selected.</p>
  </ng-container>
</ng-container>

In the above code we will check whether the selectedEmployee has any value. This will get the value when we change the value in the dropdown box. Now we give the value of selectedEmployee to NgSwitch to check with NgSwitchCase.

Based on the value one of the para element will be displayed. If nothing is satisfied, then NgSwitchDefault will be taken into consideration.

Open the app.module.ts file and import the FormsModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now run the application using

ng serve --o

It will display the result screen as below.